<template>
  <div class="box">
    <div class="top">
      <div class="nav">
        <i class="fa fa-commenting-o i1"></i>
        <i class="fa fa-cog" @click="handleClick"></i>
      </div>

      <div class="loginBox">
        <div class="loginBox2">
          <div class="login1" @click="head_data">
            <i v-if="status" class="fa fa-user-circle-o"></i>
            <img v-if="!status" :src="$store.state.head_img" alt="">
          </div>

          <div class="login2">
           <template v-if="status">
              <router-link to='/center/login'>登入/注册</router-link>
           </template>
           <div v-if="!status" class="userName">{{username}}</div>

            <div><p>签到领积分</p></div>
          </div>
        </div>
      </div>

      <div class="top_foot">
        <div>
          <div class="tip">
            <h2>12</h2>
            <h3>积分</h3>
          </div>
          <p>|</p>
        </div>
        <div>
          <div class="tip">
            <h2>12</h2>
            <h3>优惠卷</h3>
          </div>
          <p>|</p>
        </div>
        <div>
          <div class="tip">
            <h2>12</h2>
            <h3>代金卷</h3>
          </div>
          <p>|</p>
        </div>
        <div>
          <div class="tip">
            <h2>12</h2>
            <h3>腰果</h3>
          </div>
          <p></p>
        </div>
      </div>
    </div>

    <div class="dingdan">
      <div class="h1">
        <h2>我的订单</h2>
        <a href="#"><h3>全部订单</h3></a>
      </div>

      <div class="imgBox">
        <ul class="clear">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>

      <div class="lunbo">
        <img src="../../assets/imgs/center_lunbo1.png" alt="" />
      </div>
    </div>

    <div class="jmsc">
         <h2>我的经贸商城</h2>
      <ul class="clear">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      status: true,
      username: ''
    }
  },

  mounted () {
    const token = localStorage.getItem('token')
    const username = localStorage.getItem('userData')

    this.request
      .post('/api/user/tokenDecoder', {
        token
      })
      .then((res) => {
        console.log(res)
        if (res.status == 200) {
          this.status = false
          this.username = username
          const state = localStorage.getItem('head_img')
          if (!state) {
            localStorage.setItem('head_img', res.data.data.img)
          }
          // localStorage.setItem("head_img",res.data.data.img)
          this.$store.state.head_img = localStorage.getItem('head_img')
        } else {
          localStorage.removeItem('token')
          localStorage.removeItem('head_img')
        }
      })
  },
  methods: {
    handleClick () {
      this.$router.push('/center/set')
    },
    head_data () {
      this.$router.push('/center/head_data')
    }
  }
}
</script>

<style scoped>
.box {
  width: 23.4375rem;
  height: 41.6875rem;
  background-color: #f9f9f9;
}
.top {
  height: 13.5rem;
  position: relative;
}
.top .nav {
  width: 100%;
  height: 3rem;
  background-color: #5ac3fb;
}
.top .nav i {
  width: 2rem;
  line-height: 3rem;
  text-align: center;
  float: right;
  font-size: 21px;
  color: white;
}
.i1 {
  margin-right: 5px;
}
.top .loginBox {
  width: 100%;
  height: 7rem;
  background-color: #5ac3fb;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.top .loginBox .loginBox2 {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  background-color: #5ac3fb;
}
.loginBox2 > .login1 {
  width: 4.5rem;
  height: 80px;
  text-align: center;
  float: left;
}
.login1 i {
  font-size: 4.5rem;
  background: #cbcbcb;
  border-radius: 100%;
  color: white;
}
.loginBox2 > .login2 {
  height: 80px;
  float: left;
  margin-left: 10px;
}
.loginBox2 .login2 a {
  font-size: 20px;
  margin: 10px 0;
  border: none;
  background-color: transparent;
  color: white;
  font-weight: 500;
}

.top_foot {
  width: 95%;
  height: 5rem;
  position: absolute;
  background-color: rgb(255, 255, 255);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 10px;
}
.top_foot > div {
  width: 25%;
  height: 5rem;
  float: left;
  position: relative;
}
.top_foot .tip{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.top_foot > div p {
  float: right;
  position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.dingdan {
  width: 95%;
  height: 13rem;
  background-color: white;
  margin: 10px auto;
  border-radius: 10px;
}
.dingdan .h1 {
  width: 100%;
  height: 30px;
}
.dingdan .h1 h2 {
  line-height: 30px;
  float: left;
  margin-left: 10px;
  font-size: 15px;
  color: black;
}
.dingdan .h1 a {
  line-height: 30px;
  float: right;
  margin-right: 20px;
  font-size: 13px;
}
.dingdan .imgBox ul {
  width: 100%;
  height: 5rem;
  background-image: url("../../assets/imgs/center_img.png");
  background-repeat: no-repeat;
  margin: 0 auto;
}
.dingdan .imgBox ul li {
  width: 3rem;
  height: 3rem;
  margin: 0 0.625rem;
  float: left;
}

.lunbo {
  width: 95%;
  height: 5.5rem;
  background-color: #5ac3fb;
  margin: 0 auto;
  border-radius: 10px;
}
.lunbo img {
  width: 100%;
  height: 5.5rem;
  background-color: #5ac3fb;
  margin: 0 auto;
  border-radius: 10px;
}

.jmsc {
  width: 95%;
  height: 15rem;
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
}
.jmsc h2{
    font-size: 15px;
    float: left;
    margin: 10px;
    color: black;
}
.jmsc ul {
  width: 100%;
  height: 11rem;
  clear: both;
  background-image: url("../../assets/imgs/center_img2.png");
  background-size: 100% 100%;
}

.userName{
  font-size: 20px;
  color: rgb(0, 0, 0);
}

.login1 img{
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
}
</style>
